<template>
  <div class="tab">
    <div class="tab-item" @click="showScreen">
      <span class="select-icon"></span>
      <span class="select-text">{{screenName}}</span>
    </div>
    <div class="points-wrapper">
      <div class="logined-wrapper" v-show="(islogin==1 || !this.wccconfig.isApp)" @click="myPoints">
        <span class="points-icon"></span>
        <span class="points-content" >积分 <a class="points">{{getPoints()}}</a></span>
      </div>
      <div class="unlogin-wrapper" :class="{androidVC: this.wccconfig.isAndroid}" v-show="(islogin==0 && this.wccconfig.isApp)" @click="login">
        <span class="login-register" >登录/注册</span>
      </div>
    </div>
    <div class="tab-item" @click="goMyJoined">
      <span class="myjoin-text">我参与的</span>
      <span class="myjoin-icon"></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      data() {
        return {
        };
      },
      props: {
        points: {
          type: String
        },
        islogin: {
          type: String
        },
        screenName: {
          type: String
        }
      },
      methods: {
        myPoints() {
          if (this.utils.supportMyPoints()) {
            this.wccia.jumpToNative("68", null);
            this.$emit('stopDanMu')
          }
        },
        getPoints() {
          if (this.wccconfig.isApp) {
            return this.points
          } else {
            return '0'
          }
        },
        showScreen() {
          this.$emit("listenToShowScreen")
        },
        goMyJoined() {
          if (this.wccconfig.isApp) {
            if (this.islogin === '1') {
              if (this.utils.supportWccia()) {
                this.utils.doRouter(this, '/myparticipation', {'h5title': '我的夺宝'})
                this.$emit('stopDanMu')
              } else {
                //不支持openWebView,则提示下载更新
                this.$emit("showDialogByType", '6')
              }
            } else {
              //当前app内，没有登录，则登录
              let vue = this
              if (this.utils.supportWccia()) {
                vue.$emit("stopDanMu")
                this.wccia.checkLogin(function(urid){
                  vue.$emit("listenToRefreshForLogin", urid)
                })
              } else {
                //不支持登录协议，则提示去个人中心登录
                this.$emit("showDialogByType", '5')
              }
            }
          } else {
            //分享出去，则显示下载弹框
            this.$emit("showDialogByType", '4')
          }
        },
        login() {
          let vue = this
          if (this.utils.supportWccia()) {
            vue.$emit("stopDanMu")
            this.wccia.checkLogin(function(urid){
              vue.$emit("listenToRefreshForLogin", urid)
            })
          } else {
            //不支持登录协议，则提示去个人中心登录
            this.$emit("showDialogByType", '5')
          }
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl";
  .tab
    display flex
    width 100%
    height .4rem
    padding .26rem 0 .26rem 0
    line-height .4rem
    .tab-item
      display block
      font-size 0
      flex 1
      text-align center
      .select-icon
        display  inline-block
        width .28rem
        height .24rem
        background-size .28rem .24rem
        bg-image('./img/icon_select')
      .myjoin-icon
        display  inline-block
        width .11rem
        height .20rem
        background-size .11rem .20rem
        bg-image('./img/icon_arrow_right')
      .select-text, .points-content, .myjoin-text
        font-size .3rem
        color #484848
        padding: 0 .18rem 0 .18rem
    .points-wrapper
      display block
      font-size 0
      flex 1
      text-align center
      border-left 1px solid #B4B4B4
      border-right 1px solid #B4B4B4
      .logined-wrapper
        text-align center
        height .4rem
        line-height .4rem
        .points-icon
          display inline-block
          width .28rem
          height .28rem
          margin-top  .06rem
          background-size .28rem .28rem
          bg-image('./img/icon_points')
          background-repeat no-repeat
        .points-content
          display inline-block
          margin-left .1rem
          vertical-align top
          font-size .3rem
          color #484848
          padding: 0
          .points
            line-height .4rem
            color #1cc0a5
      .unlogin-wrapper
        line-height .4rem
        height .4rem
        background-color #FEE36E
        border-radius .1rem
        margin 0 .4rem 0 .4rem
        &.androidVC
          margin -.025rem .4rem 0 .4rem
          padding-top .05rem
        .login-register
          font-size .3rem
          color #7d3500
</style>
